<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body {
            background-image: url("../static/images/background.jpeg");
            background-position: center;
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .custom-input {
            border: 1.5px solid #5FB878; /* 添加绿色边框 */
            border-radius: 5px; /* 添加圆角效果 */
            padding: 10px; /* 添加内边距 */
        }
        .custom-box{
            margin-top: 200px;
            border: 2px solid #8d8d8d;
            padding-top: 50px;
            padding-right: 70px;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="custom-box">
                <form class="layui-form" action="" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input custom-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input custom-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formLogin">登录</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="../static/layui/layui.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    layui.use(['form'], function() {
        var form = layui.form;

        // 监听提交
        form.on('submit(formLogin)', function(data) {
            //console.log(data.field); //{phone: '1234567', password: '1111111'}
            var phone = data.field.phone;
            var password = data.field.password;
            //使用jQuery进行Ajax提交
            $.ajax({
                type: 'get',
                url: '/user/login',
                data: {
                    "phone": phone,
                    "password": password
                },
                success: function(data) {
                    if (data === 'false') {
                        // 登录失败
                        alert('登录失败');
                        window.location.reload();//刷新页面
                    } else {
                        // 登录成功
                        if(data === 'admin'){
                            window.location.href = '/manage/toMain'; // 跳转管理员页面
                        }else{
                            window.location.href = '/manage/toMain1'; // 跳转客户页面
                        }
                    }
                },
                error: function() {
                    alert('登录请求失败');
                }
            });
            return false; // 阻止表单跳转
        });
    });
</script>
</body>
</html>
